<template>
  <div  class="table-box">
    <div class="title-txt">导出任务</div>
    <a-table :columns="columns"  :pagination="pagination"
             :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
             @change="handleTableChange" :data-source="data">
      <template #bodyCell="{ column, text }">
        <template v-if="column.key === 'status'">
          <span v-if="text === 0">处理中</span>
          <span v-if="text === 1">已完成</span>
        </template>
        <template v-if="column.key === 'action'">
          <div class="table-btn-box">
            <span v-if="text.status === 1" class="table-btn btn-1" @click="downFile(text.filePath)">下载</span>
            <span v-else class="table-btn">处理中</span>
          </div>
        </template>
      </template>
    </a-table>
  </div>

</template>

<script setup>
import {ref, onMounted, getCurrentInstance} from 'vue'
import {message} from "ant-design-vue";
const { proxy  } = getCurrentInstance()
const columns = [
  {
    title: '序号',
    dataIndex: 'orderNumber',
    key: 'orderNumber',
    width: '55px',
    align: 'left'
  },
    {
      title: '导出人',
      dataIndex: 'createBy',
       key: 'createBy',
      align: 'left'
    },
        {
          title: '文件名称',
          dataIndex: 'fileName',
          key: 'fileName',
          align: 'left',
          ellipsis: true,
        },
        {
          title: '文件大小',
          dataIndex: 'fileSize',
          key: 'fileSize',
          align: 'left'
        },
        {
          title: '处理时间',
          dataIndex: 'dealDate',
          key: 'dealDate',
          align: 'left'
        },
        {
          title: '导出状态',
          dataIndex: 'status',
          key: 'status',
          align: 'left'
        },
        {
          title: '提交时间',
          dataIndex: 'createDate',
          key: 'createDate',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '操作',
          key: 'action',
          width: '100px',
          align: 'center'
        }
]
const data = ref([])
const pagination = ref({
  pageSize: 10,
  current: 1,
  total: 0,
  showQuickJumper: true,
  showSizeChanger: true,
  showTotal: total => `共 ${total} 条`,
  size: 'small'
})
const handleTableChange = (paginationpage) => {
   pagination.value.pageSize = paginationpage.pageSize
  pagination.value.current = paginationpage.current
  pagination.value.total = paginationpage.total
  getList()
}
const getList = () => {
  let newObj = {
    pageNum: pagination.value.current,
    pageSize: pagination.value.pageSize
  }
  proxy.$api.getTableExportPage(newObj).then(res => {
    data.value = res.resultObject.list
    pagination.value.total = res.resultObject.total
  })
}
const downFile = (url) => {
  console.log('下载的地址', url)
  if (url) {
    window.location.href = url
    message.success('请查看浏览器下载列表')
  }
}
onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
.table-box {
  padding: 20px;
  background: #ffffff;
  .title-txt {
    text-align: left;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 16px;
  }
}
</style>
